<template>
  <div class="foot">
    <div class="my-div">
      <a-form :model="params" name="basic" :label-col="{ span: 10 }">
        <a-row>
          <a-col :span="6">
            <a-form-item label="井名" name="wellId" :rules="[{ required: true, message: '请输入井名', trigger: 'change' }]">
              <a-input placeholder="请输入井名" v-model:value="params.wellId" style="width: 200px"
                :disabled="props.state == '修改井'" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="井别" name="wellCategory">
              <!-- <a-select v-model:value="params.wellCategory"  mode="tags" style="width: 200px;"
                            placeholder="请输入井别"></a-select> -->
              <a-input v-model:value="params.wellCategory" mode="tags" style="width: 200px" placeholder="请输入井别"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="井型" name="wellType">
              <!-- <a-select v-model:value="params.wellType" mode="tags" style="width: 200px;"
                            placeholder="请输入井型"></a-select> -->
              <a-input v-model:value="params.wellType" mode="tags" style="width: 200px" placeholder="请输入井型"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="甲方单位" name="customerName">
              <!-- <a-select v-model:value="params.customerName" mode="tags" style="width: 200px;"
                            placeholder="请输入甲方单位"></a-select> -->
              <a-input v-model:value="params.customerName" mode="tags" style="width: 200px"
                placeholder="请输入甲方单位"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <a-form-item label="钻井队号" name="drillingUnit">
              <!-- <a-select v-model:value="params.drillingUnit" mode="tags" style="width: 200px;"
                            placeholder="请输入钻井队号"></a-select> -->
              <a-input v-model:value="params.drillingUnit" mode="tags" style="width: 200px"
                placeholder="请输入钻井队号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="完钻井深" name="maximumDepth">
              <a-input v-model:value="params.maximumDepth" style="width: 200px" controls-position="right"
                addon-after="m" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="地理位置" name="wellLocation">
              <a-input v-model:value="params.wellLocation" style="width: 200px" controls-position="right" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="构造位置" name="tectonicSetting">
              <a-input v-model:value="params.tectonicSetting" style="width: 200px" controls-position="right" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <a-form-item label="最大井斜" name="maximumInclination">
              <a-input v-model:value="params.maximumInclination" style="width: 200px" controls-position="right" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="地面海拔" name="groundElevation">
              <a-input-number v-model:value="params.groundElevation" style="width: 200px" controls-position="right"
                :min="0" addon-after="m" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="地补距" name="compensationDistance">
              <a-input-number v-model:value="params.compensationDistance" style="width: 200px" controls-position="right"
                :min="0" addon-after="m" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="有毒有害气体" name="hazardousGas">
              <a-input v-model:value="params.hazardousGas" style="width: 200px" controls-position="right" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <a-form-item label="井底温度" name="bottomTemperature">
              <a-input-number style="width: 200px" v-model:value="params.bottomTemperature" controls-position="right"
                addon-after="℃" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="井底压力" name="bottomPressure">
              <a-input-number style="width: 200px" v-model:value="params.bottomPressure" :min="0" addon-after="MPa" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="安全作业时间" name="safetyTime">
              <!-- <a-date-picker style="width: 200px;" format="YYYY-MM-DD" v-model:value="params.safetyTime"
                            controls-position="right" /> -->
              <a-input-number style="width: 200px" v-model:value="params.safetyTime" :min="0"
                addon-after="h"></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-divider orientation="left">泥浆参数</a-divider>
      <a-form :model="mudParameters" name="basic" :label-col="{ span: 10 }">
        <a-row>
          <a-col :span="6">
            <a-form-item label="泥浆类型" name="properties">
              <a-input style="width: 200px" v-model:value="mudParameters.properties" controls-position="right" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="密度" name="density" :rules="[{ required: true, message: '请输入泥浆密度', trigger: 'change' }]">
              <a-input-number style="width: 200px" v-model:value="mudParameters.density" controls-position="right"
                :min="0" addon-after="g/cm³" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="粘度" name="viscosity">
              <a-input-number style="width: 200px" v-model:value="mudParameters.viscosity" controls-position="right"
                :min="0" addon-after="s" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="PH值" name="ph">
              <a-input-number style="width: 200px" v-model:value="mudParameters.ph" controls-position="right" :min="0" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="失水率" name="waterLossRate">
              <a-input-number style="width: 200px" v-model:value="mudParameters.waterLossRate" controls-position="right"
                :min="0" addon-after="CC/mL/30min" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-divider orientation="left"><span style="color: red; font-size: 20px">*</span>钻头程序</a-divider>
      <a-form :model="params" name="basic" :label-col="{ span: 10 }">
        <a-row>
          <a-col :push="2" :span="20">
            <a-space v-for="(drill, index) in dynamicValidateForm.drills" :key="drill.id"
              style="display: flex; margin-left: -400px" align="baseline">
              <a-form-item label="钻头程序" :name="['size', index, 'depth']">
                <a-input-group style="width: 1000px" compact>
                  <a-input-number v-model:value="drill.diameter" style="width: 160px; text-align: center"
                    placeholder="钻头尺寸(mm)" :min="0" addon-after="mm" />
                  <!-- <a-input v-model:value="drill.deep" style="width: 300px;" placeholder="深度(m)"
                                    controls-position="right" /> -->
                  <a-input-number v-model:value="drill.start" style="width: 150px; text-align: center"
                    placeholder="起始深度(m)" :min="0" addon-after="m" />
                  <a-input v-model:value="value13" class="site-input-split" style="width: 30px; pointer-events: none"
                    placeholder="~" disabled />
                  <a-input-number v-model:value="drill.deep" class="site-input-right"
                    style="width: 150px; text-align: center" placeholder="深度(m)" :min="0" addon-after="m" />
                </a-input-group>
              </a-form-item>
              <a-form-item>
                <a-button style="margin-left: -100px; width: 200px" type="dashed"
                  v-if="dynamicValidateForm.drills.length > 1" class="dynamic-delete-button"
                  :disabled="dynamicValidateForm.drills.length === 1" block @click="removeDrills(drill)">删除行</a-button>
              </a-form-item>
            </a-space>
          </a-col>
        </a-row>
        <a-button type="dashed" style="width: 100%" block @click="addDomain('drill')">
          <PlusOutlined />添加一行钻头程序
        </a-button>
        <a-divider orientation="left"><span style="color: red; font-size: 20px">*</span>井身结构</a-divider>
        <a-row>
          <a-col :push="2" :span="20">
            <a-space v-for="(casing, index) in dynamicValidateForm.casings" :key="casing.id"
              style="display: flex; margin-left: -400px" align="baseline">
              <a-form-item label="套管程序" :name="['casings', index, 'depth']">
                <a-input-group style="width: 1000px" compact>
                  <a-input-number v-model:value="casing.innerDiameter" style="width: 160px; text-align: center"
                    placeholder="套管尺寸(mm)" :min="0" addon-after="mm" />
                  <!-- <a-input v-model:value="casing.deep" style="width: 300px;" placeholder="深度(m)"
                                controls-position="right" /> -->
                  <a-input-number v-model:value="casing.start" style="width: 150px; text-align: center"
                    placeholder="起始深度(m)" :min="0" addon-after="m" />
                  <a-input v-model:value="value13" class="site-input-split" style="width: 30px; pointer-events: none"
                    placeholder="~" disabled />
                  <a-input-number v-model:value="casing.deep" class="site-input-right"
                    style="width: 150px; text-align: center" placeholder="深度(m)" :min="0" addon-after="m" />
                </a-input-group>
              </a-form-item>
              <a-form-item>
                <a-button style="margin-left: -100px; width: 200px" v-if="dynamicValidateForm.casings.length > 1"
                  class="dynamic-delete-button" :disabled="dynamicValidateForm.casings.length === 1" type="dashed" block
                  @click="removeCasings(casing)">
                  <MinusCircleOutlined />删除行
                </a-button>
              </a-form-item>
            </a-space>
            <a-space v-for="(openHole, index) in dynamicValidateForm.openHoles" :key="openHole.id"
              style="display: flex; margin-left: -400px" align="baseline">
              <a-form-item label="裸眼井" :name="['openHoles', index, 'depth']">
                <a-input-group style="width: 1000px" compact>
                  <a-input-number v-model:value="openHole.diameter" style="width: 160px; text-align: center"
                    placeholder="内径(mm)" :min="0" addon-after="mm" />
                  <a-input-number v-model:value="openHole.start" style="width: 150px; text-align: center"
                    placeholder="起始深度(m)" :min="0" addon-after="m" />
                  <a-input v-model:value="value13" class="site-input-split" style="width: 30px; pointer-events: none"
                    placeholder="~" disabled />
                  <a-input-number v-model:value="openHole.deep" class="site-input-right"
                    style="width: 150px; text-align: center" placeholder="深度(m)" :min="0" addon-after="m" />
                </a-input-group>
              </a-form-item>
              <a-form-item>
                <a-button style="margin-left: -100px; width: 200px" v-if="dynamicValidateForm.openHoles.length > 0"
                  class="dynamic-delete-button" :disabled="dynamicValidateForm.openHoles.length === 0" type="dashed" block
                  @click="removeOpenHole(openHole)">
                  <MinusCircleOutlined />删除行
                </a-button>
              </a-form-item>
            </a-space>
          </a-col>
        </a-row>
        <!-- <a-button type="dashed" style="width: 100%" block @click="addDomain">
          <PlusOutlined />添加一行套管程序
        </a-button> -->
        <a-dropdown>
          <template #overlay>
            <a-menu @click="addDomain">
              <a-menu-item key="casing" style="text-align: center;">添加套管程序</a-menu-item>
              <a-menu-item key="openHole" :disabled="dynamicValidateForm.openHoles.length > 0"
                style="text-align: center;">添加裸眼井</a-menu-item>
            </a-menu>
          </template>
          <a-button type="dashed" style="width: 100%;" block overlayStyle>
            <PlusOutlined /> 添加一行结构
            <DownOutlined />
          </a-button>
        </a-dropdown>
        <a-divider orientation="left">风险井段</a-divider>
        <a-row>
          <a-col :push="2" :span="20">
            <a-space v-for="(riskWell, index) in dynamicValidateForm.riskWells" :key="riskWell.id"
              style="display: flex; margin-left: -400px" align="baseline">
              <a-form-item label="风险井段" :name="['riskWells', index, 'depth']">
                <a-input-group style="width: 1000px" compact>
                  <a-input-number v-model:value="riskWell.start" style="width: 150px; text-align: center"
                    placeholder="起始深度(m)" :min="0" />
                  <a-input v-model:value="value13" class="site-input-split" style="width: 30px; pointer-events: none"
                    placeholder="~" disabled />
                  <a-input-number v-model:value="riskWell.end" class="site-input-right"
                    style="width: 150px; text-align: center" placeholder="终点深度(m)" :min="0" />
                  <a-input v-model:value="riskWell.stratumName" style="width: 500px" placeholder="地层名称"
                    controls-position="right" />
                </a-input-group>
              </a-form-item>
              <a-button style="margin-left: 250px; width: 200px" v-if="dynamicValidateForm.riskWells.length > 1"
                class="dynamic-delete-button" :disabled="dynamicValidateForm.riskWells.length === 1" type="dashed" block
                @click="removeRiskWells(riskWell)">
                <MinusCircleOutlined />删除行
              </a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-button type="dashed" style="width: 100%" block @click="addDomain('RiskWellSection')">
          <PlusOutlined />添加一行风险井段
        </a-button>
        <a-divider orientation="left">钻井异常简报</a-divider>
        <a-row>
          <a-col :push="2" :span="20">
            <a-space v-for="(anomalyBriefing, index) in dynamicValidateForm.anomalyBriefingList" :key="anomalyBriefing.id"
              style="display: flex; margin-left: -400px" align="baseline">
              <a-form-item label="钻井异常简报" :name="['riskPrevention', index, 'size']">
                <a-input-group style="width: 1000px" compact>
                  <a-input-number v-model:value="anomalyBriefing.start" style="width: 150px; text-align: center"
                    placeholder="起始深度(m)" :min="0" />
                  <a-input v-model:value="value15" class="site-input-split" style="width: 30px; pointer-events: none"
                    placeholder="~" disabled />
                  <a-input-number v-model:value="anomalyBriefing.end" class="site-input-right"
                    style="width: 150px; text-align: center" placeholder="终点深度(m)" :min="0" />
                  <a-input v-model:value="anomalyBriefing.illustrate" style="width: 500px" controls-position="right"
                    placeholder="异常情况说明" />
                </a-input-group>
              </a-form-item>
              <!-- <a-form-item label="异常情况说明" :name="['exceptions', index, 'depth']">
                                <a-input style="width: 520px;" controls-position="right" />
                            </a-form-item> -->
              <a-button style="margin-left: 250px; width: 200px" v-if="dynamicValidateForm.anomalyBriefingList.length > 1"
                class="dynamic-delete-button" :disabled="dynamicValidateForm.anomalyBriefingList.length === 1"
                type="dashed" block @click="removeExceptions(anomalyBriefing)">
                <MinusCircleOutlined />
                删除行
              </a-button>
            </a-space>
          </a-col>
        </a-row>
        <a-button type="dashed" style="width: 100%" block @click="addDomain('DrillingAnomalyBriefing')">
          <PlusOutlined />添加一行钻井异常简报
        </a-button>
      </a-form>
    </div>
  </div>
  <div class="steps-action">
    <a-button style="margin-left: 8px" type="primary" @click="next">下一步</a-button>
  </div>
</template>
<script setup>
import { MinusCircleOutlined, PlusOutlined, DownOutlined } from "@ant-design/icons-vue";
import DesignScheme from '@/api/design/schemes.js'
import moment from "moment";
import "moment/locale/zh-cn";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import useApp from "@/hooks";
const { $, proxy } = useApp();
const emit = defineEmits(["getCurrent"]);
const props = defineProps({
  wellQuery: {
    type: Object,
  },
  state: {
    type: String,
  },
});
const dynamicValidateForm = reactive({
  drills: [],
  casings: [],
  openHoles: [],
  riskWells: [],
  anomalyBriefingList: [],
});
const params = reactive({
  wellId: "",
  wellCategory: "",
  wellType: "",
  customerName: "",
  drillingUnit: "",
  maximumDepth: "",
  wellLocation: "",
  bottomTemperature: "",
  bottomPressure: "",
  safetyTime: "",
  tectonicSetting: "",
  maximumInclination: "",
  groundElevation: 0,
  compensationDistance: 0,
  hazardousGas: "",
  mudParameters: {
    density: null,
    ph: "",
    properties: "",
    viscosity: "",
    waterLossRate: "",
  },
  drillInformationList: [],
  casingList: [],
  openHoleWellInformationList: [],
  wellRiskSectionList: [],
  anomalyBriefingList: [],
});
const mudParameters = ref({
  density: null,
  ph: "",
  properties: "",
  viscosity: "",
  waterLossRate: "",
})
function setNewData(res) {
  console.log('setNewData', res);
  for (const key in res) {
    if (res.hasOwnProperty(key) && params.hasOwnProperty(key)) {
      params[key] = res[key];
    }
  }
  mudParameters.value = params.mudParameters
  //日期处理
  // if (params.safetyTime) {
  //     params.safetyTime = dayjs(params.safetyTime, 'YYYY-MM-DD');
  //     console.log('params.safetyTime', params.safetyTime);
  // }
  let casingStart = 0
  res.casingList?.forEach((e) => {
    dynamicValidateForm.casings.push({
      innerDiameter: e.innerDiameter,
      start: casingStart,
      deep: e.deep,
      name: e.name,
      id: e.deep,
    });
    casingStart = e.deep
  });
  // let openHoleStart = 0
  res.openHoleWellInformationList?.forEach((e) => {
    dynamicValidateForm.openHoles.push({
      diameter: e.diameter,
      start: e.start,
      deep: e.deep,
      name: e.name,
      id: e.deep,
    });
  });
  let drillStart = 0
  res.drillInformationList?.forEach((e) => {
    dynamicValidateForm.drills.push({
      diameter: e.diameter,
      start: drillStart,
      deep: e.deep,
      name: e.name,
      id: e.deep,
    });
    drillStart = e.deep
  });
  res.wellRiskSectionList?.forEach((e) => {
    dynamicValidateForm.riskWells.push({
      end: e.end,
      start: e.start,
      stratumName: e.stratumName,
      id: e.start,
    });
  });
  res.anomalyBriefingList?.forEach((e) => {
    dynamicValidateForm.anomalyBriefingList.push({
      end: e.end,
      start: e.start,
      illustrate: e.illustrate,
      id: e.end,
    });
  });
}
getWellQuery();
function getWellQuery() {
  let state = localStorage.getItem("state");
  if (state === "修改井" && Object.keys(props.wellQuery).length === 0) {
    DesignScheme.getDataOne(localStorage.getItem("schemeId")).then((res) => {
      setNewData(res);
      mudParameters.value = params.mudParameters
    });
  } else {
    setNewData(props.wellQuery);
  }
}

const removeDrills = (item) => {
  let index = dynamicValidateForm.drills.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.drills.splice(index, 1);
  }
};
const removeCasings = (item) => {
  let index = dynamicValidateForm.casings.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.casings.splice(index, 1);
  }
};
const removeOpenHole = (item) => {
  let index = dynamicValidateForm.openHoles.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.openHoles.splice(index, 1);
  }
};
const removeRiskWells = (item) => {
  let index = dynamicValidateForm.riskWells.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.riskWells.splice(index, 1);
  }
};
const removeExceptions = (item) => {
  let index = dynamicValidateForm.anomalyBriefingList.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.anomalyBriefingList.splice(index, 1);
  }
};
const addDomain = (e) => {
  console.log(e);
  if (e == "drill") {
    dynamicValidateForm.drills.push({
      diameter: null,
      deep: null,
      name: `钻头${dynamicValidateForm.drills.length + 1}`,
      id: Date.now(),
    });
  } else if (e.key == "casing") {
    dynamicValidateForm.casings.push({
      innerDiameter: null,
      deep: null,
      name: `套管${dynamicValidateForm.casings.length + 1}`,
      id: Date.now(),
    });
  } else if (e.key == "openHole") {
    dynamicValidateForm.openHoles.push({
      diameter: null,
      deep: null,
      name: `裸眼井${dynamicValidateForm.openHoles.length + 1}`,
      id: Date.now(),
    });
  } else if (e == "RiskWellSection") {
    dynamicValidateForm.riskWells.push({
      end: "",
      start: "",
      stratumName: "",
      id: Date.now(),
    });
  } else if (e == "DrillingAnomalyBriefing") {
    dynamicValidateForm.anomalyBriefingList.push({
      end: "",
      start: "",
      illustrate: "",
      id: Date.now(),
    });
  }
};

function next() {
  params.mudParameters = mudParameters.value
  params.drillInformationList = dynamicValidateForm.drills;
  params.casingList = dynamicValidateForm.casings;
  params.openHoleWellInformationList = dynamicValidateForm.openHoles;
  params.wellRiskSectionList = dynamicValidateForm.riskWells;
  params.anomalyBriefingList = dynamicValidateForm.anomalyBriefingList;
  // params.safetyTime = moment(params.safetyTime).format('YYYY-MM-DD')
  if (params.wellId == '') {
    $.showToast({
      title: '井名不允许为空',
      icon: 'warn'
    })
  } else if (params.mudParameters.density == null) {
    $.showToast({
      title: '泥浆密度不允许为空',
      icon: 'warn'
    })
  } else if (params.casingList.length == 0 ||
    params.casingList[params.casingList.length - 1].innerDiameter == null ||
    params.casingList[params.casingList.length - 1].deep == null) {
    $.showToast({
      title: '套管数据不允许为空',
      icon: 'warn'
    })
  }
  // else if (params.openHoleWellInformationList.length == 0 ||
  //   params.openHoleWellInformationList[params.openHoleWellInformationList.length - 1].diameter == null ||
  //   params.openHoleWellInformationList[params.openHoleWellInformationList.length - 1].deep == null) {
  //   $.showToast({
  //     title: '裸眼井数据不允许为空',
  //     icon: 'warn'
  //   })
  // }
  else if (params.drillInformationList.length == 0 ||
    params.drillInformationList[params.drillInformationList.length - 1].diameter == null ||
    params.drillInformationList[params.drillInformationList.length - 1].deep == null) {
    $.showToast({
      title: '钻头数据不允许为空',
      icon: 'warn'
    })
  } else {
    params.page = 1;
    console.log(params);
    emit("getCurrent", params);
  }
}
</script>

<style scoped>
.steps-action {
  margin-top: 24px;
}

.my-div {
  width: 1370px;
  padding: 10px;
  transform: scaleY(-1);
}

.foot {
  overflow-x: auto;
  transform: scaleY(-1);
}

.centered-menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>